<style lang="less" scoped>
  .surgical-treatment{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
  }
</style>

<template>
  <div class="surgical-treatment">
    <div class="surgical-treatment_title">
      <span>科室手术治疗例数</span>
    </div>
    <div id="surgicalTreatment2" class="surgical-treatment_content" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDeptPCINum, getDeptSurgeryNum } from '@/api/comprehensive/surgicalTreatment'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('surgicalTreatment2'))
      // myChart.clear()
      // myChart.showLoading({
      //   text: '',
      //   fontSize: 18,
      //   left: 'center',
      //   color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
      //   textColor: '#fff', // 文字颜色
      //   maskColor: 'rgba(255, 255, 255, 0)' // 背景色
      // })
      window.addEventListener('resize', myChart.resize)
      if (this.isStrock == 'stroke') {
        getDeptSurgeryNum({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            let deptData = []
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                deptData.push({
                  value: el.deptSurgeryNum ? el.deptSurgeryNum : 0,
                  name: el.deptName
                })
              })
              let option = {
                color: ['#00F6FF', '#10dee6', '#19cdd4', '#24b1b7', '#268083', '#268083'],
                grid: {
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0
                },
                tooltip: {
                  trigger: 'item',
                  textStyle: {
                    color: '#00F6FF'
                  },
                  formatter: '{b} : {c}'
                },
                series: [
                  {
                    name: 'Funnel',
                    type: 'funnel',
                    left: '10%',
                    top: 10,
                    bottom: 10,
                    right: '15%',
                    min: 0,
                    max: 120,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'ascending',
                    gap: 0,
                    labelLine: {
                      length: 10,
                      lineStyle: {
                        width: 1,
                        type: 'solid'
                      }
                    },
                    select: {
                      disabled: false
                    },
                    itemStyle: {
                      borderColor: '#fff',
                      borderWidth: 1
                    },
                    emphasis: {
                      label: {
                        fontSize: 20
                      }
                    },
                    data: deptData.sort((a, b) => {
                      return a.value - b.value
                    }),
                    label: {
                      normal: {
                        formatter: function(params) {
                          return params.name + '  ' + params.value
                        }
                      }
                    }
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      }
    }
  }
}
</script>
